<template>
    <div>
        <TopNav title="我的关注"/>
        <div class="list">
            <div class="item" v-for="item in follows" :key="item.id">
                <img v-if="item.head_img" :src="$axios.defaults.baseURL +item.head_img" alt="" class="avatar">
                <img v-else src="@/assets/avatar.jpg" alt="" class="avatar">
                <div class="info">
                    <div class="name">{{item.nickname}}</div>
                    <div class="date">2020-01-01</div>
                </div>
                <div class="btnCancel" @click="unfollow(item.id)">
                    取消关注
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import TopNav from '../../components/TopNav'
    export default {
        data() {
            return {
                follows: []
            }
        },
        components: {
            TopNav
        },
        // 页面进来创建完毕就要获取数据
        created() {
            this.loadPage()
        },
        methods: {
            loadPage() {
                this.$axios({
                    url: '/user_follows',
                }).then(res=>{
                    console.log(res.data);
                    this.follows = res.data.data
                })
            },
            unfollow(id) {
                console.log('点击了取消关注按钮');
                this.$axios({
                    url: '/user_unfollow/' + id,
                }).then(res=>{
                    console.log(res.data);
                    this.loadPage()
                })
            }
        }
    };
</script>

<style lang="less" scoped>
.item {
    display: flex;
    align-items: center;
    padding: 16/360*100vw;
    border-bottom: 1px solid #e4e4e4;
    .avatar {
        width: 40/360*100vw;
        height: 40/360*100vw;
        object-fit: cover;
        border-radius: 50%;
    }
    .info {
        flex: 1;
        padding-left: 10/360*100vw;
        .name {
            font-size: 16/360*100vw;
        }
        .date {
            font-size: 14/360*100vw;
            padding-top:4/360*100vw;
            color: #888;
        }
    }
    .btnCancel {
        background: #e4e4e4;
        font-size: 13/360*100vw;
        height: 32/360*100vw;
        line-height: 32/360*100vw;
        padding: 0 12/360*100vw;
        border-radius: 16/360*100vw;
    }
}
</style>